<template>
	<view class="container">
		
		<swiper indicator-dots>
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<image mode="aspectFill" :src="item" @click="previewImg(item)"></image>
			</swiper-item>
		</swiper>
		
		<view class="title">
			<view class="price">
				<text>￥{{info.price}}</text>
				<text>￥{{info.oriPrice}}</text>
			</view>
			<view class="goods-name">{{info.goodsName}}</view>
		</view>
		
		<view class="details">
			<view class="tit">详情介绍</view>
			<view class="description">
				<text space="nbsp">{{info.description}}</text>
			</view>
			<u-tag shape="circle" :text="info.sendType == 1 ? '自取':'包送'" mode="dark" bg-color="#fa3534" />
			<u-tag shape="circle" v-if="info.sendType == 1" :text="info.address" mode="dark" />
			<view class="contact-way">
				<view class="way">
					<text>QQ：{{userInfo.qqnumber}}</text>
					<u-button size="mini" shape="circle" @click="copy(userInfo.qqnumber)">复制</u-button>
				</view>
			</view>
			
			<view class="time">{{formatDate(info.createTime)}}</view>
			
			
		</view>
		
		
		<view class="user-info"  @click="toUserInfoPage">
			<view class="info">
				<view class="name">{{userInfo.nickName}}</view>
				<view class="remark">{{userInfo.remark || '这个人还没有介绍哦'}}</view>
			</view>
			<u-avatar class="avatar" :src="userInfo.avatar" size="default"></u-avatar>
		</view>
		
		<view class="bottom"></view>
		
		<!-- 不是自己发布的 && 1上架中-->
		<view class="goods_nav" v-if="!isMyself && info.status == 1">
			<uni-goods-nav 
				:fill="true" 
				:options="options" 
				:button-group="buttonGroup" 
				@click="onClick"
				@buttonClick="buttonClick" />
		</view>
		
		<!-- 自己发布的 && 1上架中 -->
		<view class="goods_nav" v-if="isMyself && info.status == 1">
			<uni-goods-nav 
				:fill="true" 
				:options="myselfOptions" 
				:button-group="myselfButtonGroup" 
				@click="myselfOnClick"
				@buttonClick="myselfButtonClick" />
		</view>
		
		<u-action-sheet :safe-area-inset-bottom="true" :list="editList" :tips="editTips" v-model="editShow" @click="editClick"></u-action-sheet>
		
		<u-toast ref="uToast" />
			
		
	</view>
</template>
<script>
	import { constant } from '@/utils/constant.js'
	
	import {
		getGoodsInfo,getUserInfo,deleteByGoodsId,soldOutByGoodsId
	} from "@/api/goods.js";
	import {
		saveCollect,isCollect,delCollectByGoodsId
	} from "@/api/collect.js"
	import {
		getUser
	} from "@/api/user.js";
	export default {
		components: {},
		data() {
			return {
				goodsId: 0,
				swipers: [],          // 轮播图
				info: {},             // 商品信息
				userInfo: {},         // 商品所属用户
				isCollectFlag: false, // 是否已收藏标识
				isMyself: false,      // 商品是否是自己的
				options: [{
					icon: 'heart',
					text: '收藏'
				}],
				buttonGroup: [{
					text: '联系ta',
					backgroundColor: '#ffa200',
					color: '#fff',
				},{
					text: '我想要',
					backgroundColor: '#ff0000',
					color: '#fff',
				}],
				
				myselfOptions: [{
					icon: 'download',
					text: '下架'
				},{
					icon: 'compose',
					text: '编辑'
				}],
				myselfButtonGroup: [{
					text: '管理',
					backgroundColor: '#ffa200',
					color: '#fff',
				}],
				editTips: {
					text: '管理宝贝',
					color: '#007aff',
					fontSize: 35
				},
				editList: [{
					text: '编辑',
					fontSize: 28
				}, {
					text: '删除',
					fontSize: 28
				}],
				editShow: false
			}
		},
		methods: {
			// 复制到截切版
			copy(data){
				uni.setClipboardData({
				    data: data
				});
			},
			formatDate(dataStr) {
				if (dataStr) {
					return dataStr.replace(/-/g,"/").substring(0, 16)
				}
			},
			// 获取商品详细信息
			getDetailInfo() {
				getGoodsInfo(this.goodsId).then(res => {
					if (res.data.status == 0) {
						uni.showModal({
							title: '温馨提示',
							content: `该宝贝已被卖家下架，您可以删除此收藏或等待卖家重新上架`,
							showCancel: false,
							success: (res) => {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						this.info = res.data
						this.swipers = this.info.picsArray
					}
					
				})
			},
			// 获取商品所属用户信息
			getUserInfo() {
				getUserInfo(this.goodsId).then(res => {
					this.userInfo = res.data
					
					// 判断是否为自己发布的商品
					if (uni.getStorageSync(constant.userInfo)) {
						if(this.userInfo.userId == uni.getStorageSync(constant.userInfo).userId) {
							this.isMyself = true
						}
					}
				})
			},
			// 图片预览
			previewImg(current) {
				const urls = this.swipers.map(item => {
					return item
				})
				uni.previewImage({
					current,
					urls
				})
			},
			// 商品收藏
			async saveCollect(){
				let param = {}
				param.goodsId = this.goodsId
				await saveCollect(param).then(res => {
					this.$refs.uToast.show({
						title: '商品已收藏',
						type: 'success'
					})
				})
			},
			// 取消收藏
			delCollectByGoodsId() {
				delCollectByGoodsId(this.goodsId).then(res => {
					this.$refs.uToast.show({
						title: '已取消收藏',
						type: 'success'
					})
					this.isCollectFlag = false
					this.changeIcon()
				})
			},
			// 判断是否已收藏
			isCollect() {
				isCollect(this.goodsId).then(res => {
					if (res.data) {
						this.isCollectFlag = true
						this.changeIcon()
					} else {
						this.isCollectFlag = false
						this.changeIcon()
					}
				})
			},
			// 导航到用户详情页
			toUserInfoPage () {
				this.$u.route('/pages/user-detail/user-detail', {
					userInfo: JSON.stringify(this.userInfo)
				})
			},
			onClick(e) {  
				// 收藏按钮
				if (e.index === 0) {
					if (this.isCollectFlag) {
						this.delCollectByGoodsId()
						this.isCollectFlag = false
						this.changeIcon()
					} else {
						this.saveCollect()
						this.isCollectFlag = true
						this.changeIcon()
					}
					
				}
			},
			buttonClick(e) {  
				if(e.index == 0){  
					// 点击联系ta
					// console.log("e.detail.value: " + JSON.stringify(e.detail.value));
					// 没有校验qq号是否为空或合法数字，如果不是可用的qq号，启动qq后会停留在qq主界面  
					plus.runtime.openURL(`mqq://im/chat?chat_type=wpa&uin=${this.userInfo.qqnumber}&version=1&src_type=web`, function (res) {  
						plus.nativeUI.alert("本机没有安装QQ，无法启动");  
					});
					//"mqq://im/chat?chat_type=wpa&uin=' + e + '&version=1&src_type=web"
				}else if (e.index == 1) {
					// 点击我想要
					// 发一个请求，看登录是否过期
					getUser().then(res => {
						this.$u.route('/pages/create-order/create-order', {
							goodsInfo: JSON.stringify(this.info)
						})
					})
					
				} 		
			},
			// 收藏按钮状态修改
			changeIcon() {
				if (this.isCollectFlag) {
					this.options[0].icon = 'heart-filled'
					this.options[0].color = '#ff0000'
					this.options[0].text = '已收藏'
				} else {
					this.options[0].icon = 'heart'
					this.options[0].color = '#000000'
					this.options[0].text = '收藏'
				}
			},
			myselfOnClick(e) {
				
				if (e.index == 0) {
					// 下架按钮
					uni.showModal({
						title: '温馨提示',
						content: "确定下架该宝贝吗？",
						success: (res) => {
							if (res.confirm) {
								soldOutByGoodsId(this.goodsId).then(res => {
									this.$u.toast(`下架成功`)
									uni.navigateBack({
										delta: 1
									})
								})
							}
						}
					})
				} else if(e.index == 1) {
					// 编辑按钮
					this.$u.route('/pages/add-goods/add-goods', {
						goodsId: this.goodsId
					});
				}
			},
			myselfButtonClick(e) {  
				if(e.index == 0){  
					//点击管理
					this.editShow = true
				}        
			},
			// 底部弹出一个操作菜单，回调事件
			editClick(index) {
				if(index == 0){
					// 点击编辑
					this.$u.route('/pages/add-goods/add-goods', {
						goodsId: this.goodsId
					});
				} else if (index == 1) {
					// 点击删除
					uni.showModal({
						title: '温馨提示',
						content: "确定删除该宝贝吗？",
						success: (res) => {
							if (res.confirm) {
								deleteByGoodsId(this.goodsId).then(res => {
									uni.navigateBack({
										delta: 1
									})
								})
							}
						}
					})
				}
			}
		},
		onLoad(options) {
			this.goodsId = options.goodsId
			this.getDetailInfo()
			this.getUserInfo()
			if (uni.getStorageSync(constant.tokenKey)) {
				this.isCollect()
			} 
		}
	}
</script>

<style lang="scss" scoped>
	@import "./goods-detail.scss";
</style>